<!DOCTYPE html>
<html lang = "en" xmlns:th = "http://www.thymeleaf.org"
      xmlns:sec = "http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <meta charset = "utf-8">
    <title>网上在线选课系统</title>
    <script th:src = "@{/static/js/jquery-3.1.1.min.js}"></script>
    <meta name = "description" content = "particles.js is a lightweight JavaScript library for creating particles.">
    <meta name = "author" content = "Vincent Garreau"/>
    <meta name = "viewport"
          content = "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel = "stylesheet" media = "screen" href = "/static/css/login.css">
</head>
<body>
<!-- particles.js container -->
<div id = "particles-js" style = "display: flex;align-items: center;justify-content: center">
</div>
<div class = "login-page">
    <form id = "formDiv" action = "/login" method = "post">
        <div class = "login-content">
            <div class = "login-tit">
                <div>登录</div>
                <span id="tip" th:text="${session.login_msg}"></span>
                <div th:if="${param.error}" id="tip2" >用户或密码错误</div>
            </div>
            <div class = "login-input">
                <input id="username" type = "text" name = "username" placeholder = "学号">
            </div>
            <div class = "login-input">
                <input id="password" type = "password" name = "password" placeholder = "密码" >
            </div>
            <div class = "login-input">
                <input id="captcha" type = "text" name = "captcha" placeholder = "验证码" >
                <img src="" id="code" alt="验证码" onclick="refresh(this)"/> </input>
            </div>
            <input type="hidden" name="uuid" id="uuid"/>
            <div class = "login-btn">
                <div class = "login-btn-left" onclick = "sub()">
                    <span>登录</span>
                </div>
                <div class = "login-btn-right">
                    <input type = "checkbox" name = "remember-me" alt = "" id = "picture"> 记住密码
                </div>
            </div>
        </div>
    </form>
</div>


<!-- scripts -->
<script src = "/static/js/particles.js"></script>
<script src = "/static/js/app.js"></script>
<script>

    window.onload =()=> {
        $("#code").click();
    };
    
    let refresh=(obj)=>{
        $.get("/getCode", function(data){
            obj.src=data.data.img;
            $("#uuid").val(data.data.uuid);
        });
    };
    
    function changeImg(){
        let pic = document.getElementById("picture");
        console.log(pic.src);
        if (pic.getAttribute("src",2) === "/static/img/check.png"){
            pic.src = "/static/img/checked.png";
        }else{
            pic.src = "/static/img/check.png";
        }
    }

    document.onkeydown=function(event){
        var e = event || window.event || arguments.callee.caller.arguments[0];
        if(e && e.keyCode==13){
            //alert("sadsa");
            sub();
        }
    };


    function sub(){
        var username = document.getElementById("username").value;
        var password = document.getElementById("password").value;
        var code = document.getElementById("captcha").value;
        var uuid = document.getElementById("uuid").value;
        if(code == ""){
            document.getElementById("tip").innerHTML = "验证码不能为空";
            if ($("#tip2")[0]){
                document.getElementById("tip2").innerHTML = "";
            }
        }else{
            if (username == "" || password == ""){
                document.getElementById("tip").innerHTML = "用户或密码不能为空!";
                if ($("#tip2")[0]){
                    document.getElementById("tip2").innerHTML = "";
                }
                return false;
            }else{
                document.getElementById("formDiv").submit();
            }
        }

    }


</script>
</body>
</html>